<script setup lang="ts">
import { reactive, onMounted, watch} from 'vue'
//@ts-ignore 
import elementResizeDetectorMaker from "element-resize-detector";
import useEuStore from '@/store//eu';

// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core';
// 引入柱状图图表，图表后缀都为 Chart
import { BarChart } from 'echarts/charts';
// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {
    TitleComponent,
    TooltipComponent,
    GridComponent,
    DatasetComponent,
    TransformComponent
} from 'echarts/components';
// 标签自动布局、全局过渡动画等特性
import { LabelLayout, UniversalTransition } from 'echarts/features';
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from 'echarts/renderers';

// 注册必须的组件
echarts.use([
    TitleComponent,
    TooltipComponent,
    GridComponent,
    DatasetComponent,
    TransformComponent,
    BarChart,
    LabelLayout,
    UniversalTransition,
    CanvasRenderer
]);



let myChart: any;
const euStore = useEuStore();
let option: any = reactive(
    {
        title: {
            text: '欧盟每日返工数量',
           align: 'center',
               textStyle: {
                color: '#fff',
                fontSize: 16,
               },
            top: '3%',
            left: '3%',
            bottom: '10%'
        },
        backgroundColor: '#0f375f',
        grid: {
            left: "3%",
            right: "4%",
            top: "35%",
            bottom: "20%"//也可设置left和right设置距离来控制图表的大小
        },
        tooltip: {
            trigger: "axis",
            axisPointer: {
                type: "shadow",
                label: {
                    show: true
                }
            }
        },

        xAxis: {
            data: [],
            axisLine: {
                show: true, //隐藏X轴轴线
                lineStyle: {
                    color: '#01FCE3'
                }
            },
            axisTick: {
                show: true //隐藏X轴刻度
            },
            axisLabel: {
                show: true,
                color: "#ebf8ac" //X轴文字颜色
            },

        },
        yAxis: [
            {
                type: "value",
                nameTextStyle: {
                    color: "#ebf8ac"
                },
                position: "right",
                splitLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                axisLabel: {
                    show: false,
                    color: "#ebf8ac"
                }
            },
            {
                type: "value",
                gridIndex: 0,
                min: 50,
                max: 100,
                splitNumber: 8,
                splitLine: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    show: false
                },
                splitArea: {
                    show: true,
                    areaStyle: {
                        color: ["rgba(250,250,250,0.0)", "rgba(250,250,250,0.05)"]
                    }
                }
            }
        ],
        series: [
            {
                name: "欧盟每日返工",
                type: "bar",
                barWidth: 15,
                label: {
                    show: true,
                    position: "top",
                    
                    fontSize: 12
                },
                itemStyle: {
                    borderRadius: [2, 2, 0, 0], //柱体圆角
                    color: new echarts.graphic.LinearGradient(
                //前四个参数用于配置渐变色的起止位置，这四个参数依次对应 右下左上 四个方位。也就是从右边开始顺时针方向。
                //通过修改前4个参数，可以实现不同的渐变方向
                /*第五个参数则是一个数组，用于配置颜色的渐变过程。
                  每项为一个对象，包含offset和color两个参数
                */
                0, 1, 0, 0,
                [
                  {//代表渐变色从正上方开始
                    offset: 0, //offset范围是0~1，用于表示位置，0是指0%处的颜色
                    color: 'rgba(0,125,221,0.3)'
                  }, //柱图渐变色
                  {
                    offset: 1, //指100%处的颜色
                    color: '#00A6FF'
                  }
                ]
              ),
                },
                data: [],
            }
        ]
    }
)


onMounted(() => {
    let echarts1 = document.getElementById('echart1');
    myChart = echarts.init(echarts1);
    euStore.getData().then(() => {
        option.xAxis.data = euStore.xData;
        option.series[0].data = euStore.yData;
        myChart.setOption(option);
    });
    // 监听窗口大小变化
    window.addEventListener('resize', function () {
        myChart.resize();
    });
    // 监听echarts容器尺寸变化
    let resizeObserver:any = new ResizeObserver(() => {
        myChart.resize();
    });
    resizeObserver.observe(echarts1);//监听echarts容器尺寸变化
})

watch(() => euStore.yData, () => {
    option.xAxis.data = euStore.xData;
    option.series[0].data = euStore.yData;
    myChart.setOption(option);
})

</script>

<template>
    <div id="echart1">
    </div>
</template>

<style scoped>
#echart1,canvas {
    width: 100%;
    height: 100%;
}
</style>